<template>
	<!-- 充值记录 -->
	<view class="content">
		<view class="list_ul">
			<view class="list_li" v-for="(item,index) in item">
				<view class="list_li_left">
					<view class="list_li_left_tp">
						{{item.title}}
					</view>
					<view class="list_li_left_bt">{{item.time}}</view>
				</view>
					<view class="list_li_right">
						{{item.money}} 元
					</view>
			</view>
		</view>
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
				topState:false,
				item:[
					{
					title:'分享产品奖励 OPENID:',
					time:'2020-08-28 19:04:25',
					money:'+0.88',
					},
					{
					title:'分享产品奖励 OPENID:',
					time:'2020-08-28 19:04:25',
					money:'-0.88',
					},
					{
					title:'分享产品奖励 OPENID:',
					time:'2020-08-28 19:04:25',
					money:'+0.88',
					}
				]
			}
			},
			// 回到顶部start
			onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
			    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
			        this.topState = true
			    }else{ //当距离小于200时关闭回到顶部按钮
			        this.topState = false
			    }
			},
			// 回到顶部end
			methods:{
				top() { //回到顶部
				　　　　uni.pageScrollTo({ 
				　　　　　　scrollTop: 0, duration: 300 
				　　　　}); 
				　　}
			
		}
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.list_ul{
		width:100%;
		background-color: #fff;
	}
	.list_li{
		width:90%;
		padding:20rpx 0;
		border-bottom:2rpx solid #ebebeb;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin:0 auto;	
	}
	.list_li_left_tp{
		font-size:27rpx;
	}
	.list_li_left_bt{
		color:#666;
		font-size:23rpx;
	}
	.list_li_right{
		color: #ff80c0;
		font-size:30rpx;
	}
</style>
